<template>
	<view>
		<view class="navbar mohu w100" style="overflow: hidden;">
			<view class="tuijian_mohu">
				<image style="width: 100%;"
				src="/static/images/rank2.jpg"></image>
			</view>
		</view>
		<view class="navbar2 w100"></view>
		<view class="navbar3 w100">
			<image style="width: 100%;" 
			src="/static/images/rank2.jpg"></image>
		</view>
		<view class="search-box2 w100 ml20">
			<view @click="goSearch()" class="search-box w450">
				<u-search
					height="30"
					:clearabled="true" 
					shape="round"
					placeholder="请输入搜索关键词" 
					:showAction="false" 
					searchIcon="search"></u-search>
			</view>
		</view>
		<view style="position: fixed;top:74px;z-index: 9999;" class="w100" v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white" v-if="show_ad"></ad>
		</view>
		<view class="w100 flex flex_jc flex_wrap" :class="show_ad?'mt580':''">
			<view class="w710 flex flex_wrap" style="z-index: 99;">
				<navigator url="/pages/zhuangyuan/index" class="ele7 mt20 borr20 w100">
					<u--image :showLoading="true" src="/static/images/ele6.png" width="100%" height="100%" mode="scaleToFill"></u--image>
					<view class="ele7_p11">
						<image mode="widthFix" src="/static/zhuangyuan/aoteman_pk.png"></image>
					</view>
					<view class="v1 txt_c">
						<view class="t1 pdt20">ZHUANGYUAN</view>
						<view class="t2">凹特庄园</view>
						<view class="t3 fz25 col_fff mt10">和伙伴们一起升级凹特幼崽</view>
					</view>
				</navigator>
				
				
				<view class="borr20 ele2 mt20 hidden" @click="goQiandao()">
					<u--image :showLoading="true" src="/static/images/ele2.jpg" width="100%" height="100%"></u--image>
				</view>
				<view @click="goChouka()" class="borr20 ele3 ml20 mt20">
					<u--image :showLoading="true" src="/static/images/ele3.png" width="100%" height="100%"></u--image>
					<view class="ele3_c flex_ac flex flex_jc">
						<view class="v1 w100 txt_c">前往抽卡</view>
					</view>
				</view>
				
				<view class="w100 ele1" @click="goKapaiList()">
					<u--image :showLoading="true" src="/static/images/ele1.png" width="100%" height="100%"></u--image>
				</view>
				
				<view class="borr20 mt20 ele5"  @click="goJuji()">
					<view class="w100 txt_c mt20 v1">奥特曼剧集大全</view>
					<view class="w100 txt_c mt20 v2">(1966-2020年)</view>
					<view class="w100 flex flex_jc mt20">
						<view class="v3 borr20 fz25 txt_c">支持按角色查询</view>
					</view>
					<view class="ele5_p1">
						<u--image :showLoading="true" src="/static/images/aguru.png" width="100%" height="100%"></u--image>
					</view>
					<view class="ele5_p2">
						<u--image :showLoading="true" src="/static/images/aoteman1.png" width="100%" height="100%"></u--image>
					</view>
				</view>
				<view class="ele6 ml20 mt20">
					<navigator url="/pages/juchangban_list/index" class="v1 borr20 w100">
						<u--image :showLoading="true" src="/static/images/ele6.png" width="100%" height="100%"></u--image>
						<view class="ele6_p1">
							<u--image :showLoading="true" src="/static/images/dijia.png" width="100%" height="100%"></u--image>
						</view>
						<view class="t1 ml20">
							<view class="w100 fz30 mt20">奥特曼剧场版</view>
							<view class="w100 fz25 mt20">1976年上映过的所有剧场版</view>
						</view>
					</navigator>
					<navigator url="/pages/music_list/index" class="v2 borr20 hidden mt20 w100">
						<u--image :showLoading="true" src="/static/images/music-bg.png" width="100%" height="100%"></u--image>
						<view class="t2 ml20">
							<view class="w100 fz30 mt20">奥特曼特摄电视剧OP/ED/IN</view>
							<view class="w100 fz25 mt20">奥特曼片头曲/片尾曲/插曲</view>
						</view>
					</navigator>
				</view>
				
				<navigator url="/pages/tujian_list/index" class="ele7 mt20 borr20 w100" style="background: linear-gradient(to bottom right, #FFEB3B, #FFC107);">
					<u--image :showLoading="true" src="/static/images/ele3.png" width="100%" height="100%" mode="scaleToFill"></u--image>
					<view class="ele7_p1">
						<u--image :showLoading="true" src="/static/images/gaiya.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 txt_c">
						<view class="t1 pdt20">ULTRAMAN</view>
						<view class="t2">光之图鉴</view>
						<view class="t3 fz25 col_fff mt10">持续更新中</view>
					</view>
				</navigator>
				
				<navigator url="/pages/discussion/index" class="ele8 mt20 borr20 w100">
					<u--image :showLoading="true" src="/static/images/header.png" width="100%" height="100%" mode="scaleToFill"></u--image>
					<view class="ele8_p1">
						<u--image :showLoading="true" src="/static/images/leiou.png" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 txt_c">
						<view class="t1 pdt20">ULTRAMAN</view>
						<view class="t2">光之讨论室</view>
						<view class="t3 fz25 col_fff mt10">和伙伴们一起探索光的世界</view>
					</view>
				</navigator>
				
				<view v-for="(item,index) in list" v-if="list.length>0" @click="goArticle(item)" :class="item.class" class="mt20 borr20 w100">
					<view class="borr20" style="width: 100%;height: 100%;overflow: hidden;">
						<u--image class="borr20" :showLoading="true" :src="item.bg" width="100%" height="100%" mode="scaleToFill"></u--image>
					</view>
					<view :class="item.class+'_p1'">
						<u--image :showLoading="true" :src="item.characters" width="100%" height="100%"></u--image>
					</view>
					<view class="v1 txt_c">
						<view class="t1 pdt20">{{item.english}}</view>
						<view class="t2">{{item.chinese}}</view>
						<view class="t3 fz25 col_fff mt10">{{item.chinese2}}</view>
					</view>
				</view>
				<view style="width: 100%;height: 20rpx;"></view>
			</view>
		</view>
		
		<view class="grid_left">
			<ad-custom :unit-id="xcx_ad.GridLeftId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_right" :style="{left: (_windowWidth-70)+'px'}">
			<ad-custom :unit-id="xcx_ad.GridRightId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_jz">
			<ad-custom :unit-id="xcx_ad.GridJzId" style="width: 100vw;"
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
	</view>
</template>

<script>
	import {index,testGame} from "@/api/api"
	import adSdk from "@/utils/advertise.js"
	export default {
		data() {
			return {
				weburl:'',
				is_login:false,
				scene:getApp().globalData.scene,
				gameinfo:[],
				jappid:'',
				jpath:'',
				is_jump:0,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				list:[],
				platform:'',
				_windowWidth:getApp().globalData._windowWidth,
				_windowHeight:getApp().globalData._windowHeight

			}
		},
		
		
		onLoad: function (option) {
			var that = this
			
			
			uni.getSystemInfo({
			  success: (res) => {
				// windows | mac为pc端
				// android | ios为手机端
				console.log('getSystemInfo,', res.platform);
				that.platform = res.platform
				that.index()
			  }
			});
		},
		onShow:function(){
			adSdk.initInterstitial(this.xcx_ad.interstitialId)
			adSdk.showInterstitial()
			this.is_login = uni.getStorageSync('is_login')?uni.getStorageSync('is_login'):false
		},
	
		methods:{
			
			goSearch(){
				uni.navigateTo({
					url: '/pages/search/index',
				}); 
			},
			
			goArticle(e){
				console.log(e)
				var that = this
				if(e.type==2){
					uni.navigateTo({
						url: e.weburl,
					});
					
				}else if(e.type==3){
					that.jump2(e.appid,e.weburl)
				}else if(e.type==4){
					uni.setStorageSync('weburl',e.weburl)
					uni.navigateTo({
						url: '/pages/article/index?title='+e.chinese,
					}); 
				}
			},
			
			jump2(appid,path){
				wx.navigateToMiniProgram({
				     appId: appid, // APPID
				     path: path // path 路径
				 })
			},
			
			jump(){
				var that = this
				uni.openEmbeddedMiniProgram({
					appId: that.jappid
				})
			},
			index(){
				var that = this
					uni.getNetworkType({
						success: function (res) {
							const deviceInfo = wx.getDeviceInfo()
							index(res.networkType,that.scene,deviceInfo,that.platform).then(res=>{
								if(res.code==0){
									that.jappid			=	res.data.jump_appid
									that.jpath			=	res.data.path
									that.is_login		=   true
									that.is_jump 		=	res.data.is_jump
									that.list			=  	res.data.list
								
								}else{
									//网络连接出错
								}
								console.log(res)
							})
						}
					});
				},
			goChouka(){
				uni.navigateTo({
					url: '/pages/choujiang/index',
				})
			},
			goKapaiList(){
				uni.navigateTo({
					url: '/pages/kapai_list/index',
				}); 
			},
			 goQiandao(){
				 uni.navigateTo({
				 	url: '/pages/qiandao/index',
				 });
			 },
			 goJuji(){
				uni.navigateTo({
					url: '/pages/juji_list/index',
				}); 
			 },
			 isLogin(){
			 	if(this.is_login){
			 		return true
			 	}else{
			 		//登录
			 		uni.navigateTo({
			 			url: '/pages/login/login',
			 		});
			 	}
			 }
			 
		}
	}
</script>
<style>
	page{background-color: #F5F5F5;}
	/*让图片显示*/
	.u-transition{width: 100%;height: 100%;}
	.u-search__content {opacity: .3;}
</style>
<style scoped>
	.tuijian_mohu{position: absolute;width: 100%;height: 100%;top: 0;-webkit-filter: blur(5px);}
	.search-box2{height: 30px;position: fixed;left: 0;z-index: 999;top: 44px;}
	.navbar2{height: 74px;overflow: hidden;}
	.navbar3{height: 350rpx;overflow: hidden;position: absolute;top: 0;left: 0;z-index: 99;}
	.navbar{height: 74px;position: fixed;top: 0;left: 0;z-index: 998;}
	.navbar3::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  width: 100%;
	  height: 100rpx; /* 模糊区域的高度 */
	  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
	  pointer-events: none; /* 防止伪元素影响鼠标事件 */
	}
	.navbar3 image{display: block;}
	
	
	
	.g .btn{width: 150rpx;height: 150rpx;background-color: #ffbc00;border-radius: 10rpx;color: #FFFFFF;font-size: 55rpx;font-weight: bold;text-align: center;}
	.g .name{width: 400rpx;font-size: 40rpx;color: #999999;text-align: center;}
	.g .icon image{width: 100%;height: 100%;}
	.g .icon{width: 150rpx;height: 150rpx;border-radius: 10rpx;overflow: hidden;}
	.g {background-color: #FFFFFF;height: 180rpx;}
	.ele8 .v1 .t2{font-size: 45rpx;color: red;font-weight: bold;color: #000000;letter-spacing:3rpx}
	.ele8 .v1 .t1{font-size: 40rpx;color: red;font-weight: bold;font-style: italic}
	.ele8 .v1{width: 500rpx;height: 190rpx;position: absolute;top: 0;left: 150rpx;}
	.ele8_p1{position: absolute;left:20rpx;bottom: -5rpx;height: 250rpx;width: 110rpx;}
	.ele8{height: 190rpx;position: relative;}
	
	.ele7 .v1 .t2{font-size: 45rpx;color: red;font-weight: bold;color: #000000;letter-spacing:3rpx}
	.ele7 .v1 .t1{font-size: 40rpx;color: red;font-weight: bold;font-style: italic}
	.ele7 .v1{width: 500rpx;height: 190rpx;position: absolute;top: 0;left: 0;}
	.ele7_p1{position: absolute;right: 20rpx;bottom: -5rpx;height: 250rpx;width: 110rpx;}
	.ele7_p11 image{width: 100%;}
	.ele7_p11{position: absolute;right: 20rpx;bottom: -5rpx;width: 150rpx;}
	.ele7{height: 190rpx;position: relative;}
	.ele6 .t2{height: 190rpx;width: 400rpx;position: absolute;left: 0;top: 0;color: #FFFFFF;}
	.ele6 .t1{height: 190rpx;width: 260rpx;position: absolute;left: 0;top: 0;color: #FFFFFF;}
	.ele6_p1{position: absolute;right: 20rpx;bottom: 0;height: 250rpx;width: 110rpx;}
	.ele6 .v2{height: 190rpx;position: relative;}
	.ele6 .v1{height: 190rpx;position: relative;}
	.ele6{width: 440rpx;height: 400rpx;}
	.ele5 .v3{background-color: #FFFFFF;width: 200rpx;height: 50rpx;line-height: 50rpx;color: #02BAFF;}
	.ele5 .v2{color: #FFF0F5;font-size: 20rpx;}
	.ele5 .v1{color: #FFFFFF;font-size: 26rpx;font-weight: bold;}
	.ele5_p1{height: 200rpx;width: 90rpx;position: absolute;bottom: 10rpx;left: 30rpx;}
	.ele5_p2{height: 200rpx;width: 90rpx;position: absolute;bottom: 10rpx;right: 30rpx;}
	.ele5{width: 250rpx;height: 400rpx;background:linear-gradient(to bottom right, #02BAFF, #4699FF);position: relative;}
	.ele4{margin-left: 155rpx;width: 400rpx;height: 400rpx;}
	.ele3_c .v1{font-size: 40rpx;height: 192rpx;line-height: 192rpx;font-weight: bold;}
	.ele1{height: 192rpx;margin-top: 20rpx;}
	.ele2{background: linear-gradient(to bottom right, #FFB17A, #FF6260); height: 192rpx;width: 400rpx;}
	.ele3{background: linear-gradient(to bottom right, #FF8F03, #FF692C);width: 290rpx;height: 192rpx;position: relative;}
	.ele3_c{position: absolute;top: 0;left: 0;width: 290rpx;height: 192rpx;color: #FFFFFF;}
	
	.box{column-count: 3;}
	.richImg { margin-bottom: 10px;position: relative;width: 214rpx;}
	.richBtn,.richImg image { width: 100%;}
	.richBtn {align-items: center;background: #333;bottom: 0; display: flex; justify-content: center;left: 0;opacity: .8;position: absolute;height: 50rpx;}
	.richBtn view { flex: 1;text-align: center;}
	.previewWrap {padding: 8px 0;}
	.richBtn image { width: 18px;}
	.shareButton button { background-color: inherit; flex: 1; margin: 0!important; position: static; text-align: center;width: auto!important;	}
	.shareButton button:after {content: none;}
	.shareButton button::after {border: none;}
	.inputwrp { background: #0066ff; margin:20rpx; padding: 5px;}
	.inputwrp input {background: #fff; padding: 0 10px;}
	
</style>